<template>
	<view class="my_order">
		<!-- <Navbar>我的订单</Navbar> -->
		<view class="navbar">
			<view class="back" @click="back">
				<image :src="`${baseImageUrl}/common/back.png`"></image>
			</view>
			<view class="title">我的订单</view>
		</view>
		<scroll-view scroll-x class="scroll_box">
			<view class="item" :class="active==index?'active':''" v-for="(item,index) in scroll"
				@click="changeActive(index)">
				{{item}}
			</view>
		</scroll-view>
		<scroll-view scroll-y class="scroll_view" @scrolltolower="loadmore">
			<view class="item" v-for="item in list" @click="router(`/pages/shopping/payment?id=${item.id}`)">
				<view class="item_head">
					<view class="order_no">订单编号：{{item.order_no}}</view>
					<view class="status">{{item.status_name}}</view>
				</view>
				<view class="item_view">
					<image :src="item.product.cover" class="cover"></image>
					<view class="item_box">
						<view class="name">{{item.product.name}}</view>
						<view class="synopsis">{{item.product.synopsis}}</view>
						<!-- <view class="price">
							<text class="unit">￥</text>
							<text class="number">{{item.product.price}}</text>
							<text>+</text>
							<image :src="`${baseImageUrl}/add/s1.png`"></image>
							<text class="number">{{item.product.price_silver}}</text>
						</view> -->
						<view class="price">
							<view v-if="item.total>0">
								<text class="unit">￥</text>
								<!-- <image :src="`${baseImageUrl}/common/gy.png`"></image> -->
								<text>{{item.total}}</text>
							</view>
							<view v-if="item.total_silver>0">
								<!-- <image :src="`${baseImageUrl}/add/s1.png`"></image> -->
								<image :src="`${baseImageUrl}/common/gy.png`"></image>
								<text>{{item.total_silver}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="btn" v-if="item.status==2">
					<view @click="submit(item.id)">确认收货</view>
				</view>
			</view>
			<u-loadmore :status="loadmore_status" :color="$store.state.loadmoreColor"
				:lineColor="$store.state.loadmoreColor" line @loadmore="loadmore" />
		</scroll-view>
	</view>
</template>

<script>
	import {
		shopOrderLists,
		shopOrderComplete
	} from '@/request/api.js';
	export default {
		data() {
			return {
				type: 1,
				scroll: [],
				active: 0,
				list: []
			}
		},
		async onLoad(options) {
			this.type = options.type;
			let {
				status
			} = await shopOrderLists({
				page: this.page,
				limit: 1
			});
			const keys = Object.keys(status);
			this.active = keys.length ? keys[0] : '';
			this.scroll = status;
			this.getList();
		},
		methods: {
			async getList() {
				let {
					list
				} = await shopOrderLists({
					status: this.active,
					page: this.page,
					limit: this.limit
				});
				this.last_page = list.last_page;
				list = list.list;
				this.list = this.page == 1 ? list : [...this.list, ...list];
				this.loadmore_status = this.last_page == this.page ? 'nomore' : 'loadmore';
			},
			loadmore() {
				if (this.page < this.last_page) {
					this.page++;
					this.getList();
				}
			},
			changeActive(value) {
				this.active = String(value);
				this.active = value.toString()
				this.page = 1;
				this.list = [];
				this.getList();
			},
			async submit(id) {
				await shopOrderComplete({
					id
				});
				this.$u.toast("操作成功");
				setTimeout(() => {
					this.getList();
				}, 1500);
			},
			back() {
				let type = this.type;
				if (type) {
					this.backRouter();
					return false;
				}
				let number = this.$store.state.tabbarIndex;
				this.redirectRouter(0);
			}
		}
	}
</script>

<style scoped lang="scss">
	.my_order {
		height: 100vh;
		background: #29170D;
		overflow: hidden;

		.navbar {
			width: 100%;
			height: $navbarHeight;
			padding-bottom: 30rpx;
			box-sizing: border-box;
			background: url(#{$baseImageUrl}/common/nav_bg.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			position: relative;
			z-index: 99999;

			.title {
				color: #FFFFFF;
				font-size: 36rpx;
				font-weight: 400;
				font-family: LiSu;
			}

			.back {
				width: 102rpx;
				height: 52rpx;
				position: absolute;
				left: 35rpx;
				bottom: 12rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		$tabsHeight: 100rpx;

		.scroll_box {
			white-space: nowrap;
			height: $tabsHeight;
			padding: 20rpx 0;
			box-sizing: border-box;

			.item {
				display: inline-block;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 40rpx;
				font-weight: 400;
				font-family: LiSu;
				margin-right: 30rpx;
				padding: 0 30rpx;

				&.active {
					color: #494338;
					background: url(#{$baseImageUrl}/common/active.png) no-repeat;
					background-size: 100% 100%;
				}

				&:last-child {
					margin: 0;
				}
			}
		}

		.scroll_view {
			height: calc(100vh - #{$navbarHeight} - #{$tabsHeight});
			padding: 20rpx 10rpx;
			box-sizing: border-box;

			.item {
				width: 100%;
				margin-bottom: 30rpx;
				padding: 0 35rpx 20rpx;
				box-sizing: border-box;
				background: url(#{$baseImageUrl}/add/bg8.png) no-repeat;
				background-size: 100% 100%;

				.item_head {
					width: 100%;
					height: 60rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.order_no {
						color: #494338;
						font-size: 28rpx;
						font-weight: 400;
						font-family: SimSun;
					}

					.status {
						color: #494338;
						font-size: 24rpx;
						font-weight: 400;
						font-family: SimSun;
					}
				}

				.item_view {
					border-top: 1px solid rgba(179, 173, 176, 0.5);
					border-bottom: 1px solid rgba(179, 173, 176, 0.5);
					padding: 20rpx 10rpx;
					box-sizing: border-box;
					display: flex;

					.cover {
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
					}

					.item_box {
						flex: 1;
						padding: 10rpx 15rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						overflow: hidden;

						.name {
							color: #494338;
							font-size: 36rpx;
							font-weight: 400;
							font-family: LiSu;
						}

						.synopsis {
							color: #494338;
							font-size: 24rpx;
							font-weight: 500;
						}

						.price {
							display: flex;
							align-items: center;

							&>view {
								display: flex;
								align-items: center;

								&:first-child {
									margin-right: 10rpx;
								}

								image {
									width: 38rpx;
									height: 38rpx;
								}

								text {
									color: #494338;
									font-size: 32rpx;
									font-weight: 400;
									font-family: LiSu;
									padding-left: 6rpx;
									box-sizing: border-box;
								}
							}
						}

						// .price {
						// 	display: flex;
						// 	align-items: center;

						// 	* {
						// 		margin-right: 10rpx;
						// 	}

						// 	.unit {
						// 		color: #494338;
						// 		font-size: 24rpx;
						// 		font-weight: 400;
						// 		font-family: LiSu;
						// 	}

						// 	image {
						// 		width: 38rpx;
						// 		height: 38rpx;
						// 	}

						// 	text {
						// 		color: #494338;
						// 		font-size: 32rpx;
						// 		font-weight: 400;
						// 		font-family: LiSu;

						// 		&.number {
						// 			color: #494338;
						// 			font-size: 32rpx;
						// 			font-weight: 400;
						// 			font-family: LiSu;
						// 		}
						// 	}
						// }
					}
				}

				.btn {
					padding-top: 20rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: flex-end;

					view {
						width: 204rpx;
						height: 74rpx;
						line-height: 74rpx;
						text-align: center;
						color: #FFFFFF;
						font-size: 30rpx;
						font-weight: 400;
						font-family: SimSun;
						background: url(#{$baseImageUrl}/common/btn.png) no-repeat;
						background-size: 100% 100%;
					}
				}
			}
		}
	}
</style>